Tutorial Brief

This tutorial covers the basics of contrlling the layout of IPython widgets.

We will be using the following functions to do that.

  • display()
  • widget.add_class()
  • widget.set_css()

Video Tutorial:

https://www.youtube.com/watch?v=8v7gVQlHJ-g

Import the library


In [1]:
from IPython.html import widgets
from IPython.display import display

Default Layout "vbox" class

By default a container will have a "vbox" css class added to it.


In [2]:
v_container = widgets.ContainerWidget()

# Define Widgets
for counter in range(5):
    wgt_check = widgets.CheckboxWidget()
    wgt_text = widgets.TextWidget(description="Name")
    wgt_select = widgets.DropdownWidget(values=["Guest", "User", "Admin"])

    # Add Widgets
    v_container.children += (wgt_check, wgt_text, wgt_select)

wgt_button = widgets.ButtonWidget(description="Submit")
v_container.children += (wgt_button,)

# Display the container
display(v_container)

Horizontal Layout with "hbox" class


In [3]:
v_container = widgets.ContainerWidget()

# Display the container
display(v_container)

# Define Widgets
for counter in range(5):
    wgt_check = widgets.CheckboxWidget()
    wgt_text = widgets.TextWidget(description="Name")
    wgt_select = widgets.DropdownWidget(values=["Guest", "User", "Admin"])

    # Add Widgets
    h_container = widgets.ContainerWidget()
    h_container.children += (wgt_check, wgt_text, wgt_select)
    v_container.children += (h_container,)
    
    # Change css class of the container
    h_container.remove_class('vbox')
    h_container.add_class('hbox')

wgt_button = widgets.ButtonWidget(description="Submit")
v_container.children += (wgt_button,)